<template>
  <div class="mains">
    <div class="bgTop">
      <img src="../../../static/buy/bookBuy.jpg" alt="">
      <p>100%正版·消毒塑封·满29包邮</p>
    </div>
    <div class="detials">
      <div class="line">
        <div class="bookTitle">
          <h3>谁的青春不迷茫</h3> <span class="hot">HOT!</span><span class="titles"><i class="douban">豆瓣评分</i><i class="fen">5.9</i></span>
        </div>
        <p>刘同150万字北漂记录，跨度十年的自我对话，真诚记录了北漂人的青春与奋斗！</p>
        <div class="priceList">
          <span class="price"><i class="fuhao">￥</i><i class="realPrice">13</i></span><span class="titles"><i class="douban">二手价</i><i class="fen">3.7折</i></span><span class="originPrice">原价￥<i>35</i></span>
        </div>
        <div class="yunfei">
          <span class="title"><i>运费</i><i class="realPrice">3</i><i>元</i></span><span><i>满</i><i>29</i><i>包邮</i></span>
        </div>
      </div>
      <div class="author">
        <p>
          <span class="first">作者</span><span>刘同</span>
        </p>
        <p>
          <span class="first">出版社</span><span class="address">中信出版社</span><span>2012-12</span>
        </p>
      </div>
    </div>

    <div class="mulu">
      <h3>简介和目录</h3>
      <p>奋斗小青年刘同 十年逆袭人生
        给都市中焦躁不安困惑迷茫的年轻人
        一个人，十年光阴；一座城，瞬息万变...</p>
      <div class="more">展开</div>
    </div>
    <div class="mulu comments">
      <div class="tops">
        <h3>评价（12421128条）</h3>
        <div>
          <span>好评率</span><span>99.99%</span>
        </div>
      </div>
      <div class="commentsArea">
        <img src="../../../static/index/banner.jpg" alt="" class="commentsAvatar">
        <div class="userArea">
          <span class="username">用户名</span>
          <span class="result">特别好的一本书</span>
        </div>
      </div>
    </div>
    <books-footer />
    <books-recommend />
  </div>
</template>
<script>
import booksFooter from '../../components/footer/booksFooter'
import BooksRecommend from '../../components/recommend/recommend'
export default {
    data() {
        return {}
    },
    onLoad() {
        const pages = getCurrentPages()
        console.log(pages)
    },
    components: {
        booksFooter,
        BooksRecommend
    }
}
</script>
<style lang="scss" scoped>
.mains {
    background: #f8f8f8;
    padding-bottom: 90rpx;
}
.bgTop {
    padding: 30rpx 18rpx 18rpx;
    padding-bottom: 0;
    background: #f8f8f8;
    height: 540rpx;
    img {
        width: 296rpx;
        height: 430rpx;
        display: block;
        margin: 0 auto;
    }
    p {
        color: #c78550;
        font-size: 28rpx;
        width: 100%;
        text-align: center;
        margin-top: 40rpx;
    }
}
.detials {
    padding: 30rpx 18rpx;
    background: #fff;
    box-sizing: border-box;
    .line {
        border-bottom: 1px solid #d9d9d9;
        padding-bottom: 30rpx;
    }
    .author {
        p {
            span {
                &.first {
                    width: 90rpx;
                }
                &.address {
                    margin-right: 20rpx;
                }
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
    .bookTitle {
        h3 {
            color: #2b2b2b;
            font-weight: bold;
            font-size: 36rpx;
            display: inline-block;
            vertical-align: middle;
            margin-right: 20rpx;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            &.hot {
                background: #c78550;

                font-size: 24rpx;
                color: #fff;
                border-radius: 3px;
                width: 84rpx;
                height: 34rpx;
                line-height: 34rpx;
                text-align: center;
                margin-right: 20rpx;
            }
            &.titles {
                width: 160rpx;
                height: 34rpx;

                text-align: center;
                background: #c78550;
                border-radius: 3px;
                color: #fff;
                i {
                    display: inline-block;
                    vertical-align: top;
                    height: 34rpx;
                    font-size: 24rpx;
                    line-height: 34rpx;
                    &.douban {
                    }
                }
            }
        }
    }
    .priceList {
        margin-top: 30rpx;
        span {
            display: inline-block;
            vertical-align: middle;
            margin-right: 20rpx;
            &.originPrice {
                color: #2b2b2b;
                font-size: 24rpx;
            }
            i {
                display: inline-block;
                vertical-align: top;
                &.fuhao {
                    font-size: 24rpx;
                    color: #c75050;
                    vertical-align: middle;
                    font-weight: 700;
                }
                &.realPrice {
                    font-size: 36rpx;
                    color: #c75050;
                    vertical-align: middle;
                    font-weight: 700;
                }
            }
        }
    }
    .yunfei {
        span {
            &.title {
                margin-right: 20rpx;
            }
            i {
                display: inline-block;
                vertical-align: middle;
                font-size: 24rpx;
                color: #2b2b2b;
            }
        }
    }
    p {
        color: #2b2b2b;
        font-size: 24rpx;
        margin-top: 20rpx;
    }
}
.titles {
    width: 160rpx;
    height: 34rpx;

    text-align: center;
    background: #c78550;
    border-radius: 3px;
    color: #fff;
    i {
        display: inline-block;
        vertical-align: top;
        height: 34rpx;
        font-size: 24rpx;
        line-height: 34rpx;
        &.douban {
        }
    }
}
.mulu {
    padding: 30rpx 18rpx;
    background: #fff;
    margin-top: 20rpx;
    position: relative;
    min-height: 286rpx;
    h3 {
        font-size: 36rpx;
        color: #2b2b2b;
        font-weight: 700;
        padding-left: 10rpx;
        border-left: 2px solid #c78550;
    }
    p {
        font-size: 26rpx;
        color: #2b2b2b;
        margin-top: 30rpx;
        line-height: 48rpx;
    }
    .more {
        position: absolute;
        padding-right: 40rpx;
        background: url('../../../static/buy/down.png') no-repeat right center;
        bottom: 30rpx;
        right: 20rpx;
        background-size: 30rpx 18rpx;
        font-size: 26rpx;
    }
}
.comments {
    height: 206rpx;
    .tops {
        display: flex;
        justify-content: space-between;
    }
    .commentsArea {
        margin-top: 30rpx;
        img {
            border-radius: 50%;
            width: 80rpx;
            height: 80rpx;
            float: left;
            margin-right: 22rpx;
        }
        .userArea {
            float: left;
            span {
                display: block;
                .username {
                    color: #2b2b2b;
                    font-size: 28rpx;
                    font-weight: bold;
                }
                .result {
                    color: #666666;
                    font-size: 16rpx;
                }
            }
        }
    }

    h3 {
        height: 50rpx;
    }
    div {
        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 28rpx;
        }
    }
}
</style>
